<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="60%"
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            v-model="formData.subject_id"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in SubjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" prop="class_name">
          <el-input
            v-model="formData.class_name"
            placeholder="请输入班级名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="授课老师" prop="">
          <el-select
            v-model="formData.teacher_info"
            placeholder="请选择"
            clearable
            multiple
            filterable
            allow-create
            value-key="user_id"
          >
            <el-option
              v-for="item in jiangshiList"
              :key="item.user_id"
              :label="item.username"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师" prop="">
          <el-select
            v-model="formData.zhujiao_info"
            clearable
            multiple
            filterable
            allow-create
            value-key="user_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in zhujiaoList"
              :key="item.user_id"
              :label="item.username"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班主任老师" prop="">
          <el-select
            v-model="formData.manager_info"
            placeholder="请选择"
            clearable
            multiple
            filterable
            allow-create
            value-key="user_id"
          >
            <el-option
              v-for="item in banzhurenList"
              :key="item.user_id"
              :label="item.username"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开课结课日期">
          <el-date-picker
            v-model="dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="排序" prop="">
          <el-input-number v-model="formData.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="班级状态" prop="state">
          <el-switch
            v-model="formData.state"
            :active-value="1"
            :inactive-value="2"
            active-text="正常"
            inactive-text="关闭"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addClassInfoApi,
  editClassInfoApi,
  getTeacherListApi,
} from "@/api/class";
import { getSubjectInfoAPi } from "@/api/student";
export default {
  name: "AddClass",
  data() {
    return {
      SubjectList: [], //归属学科数据列表
      dateRange: [], //时间数组
      jiangshiList: [], //讲师下拉数据
      zhujiaoList: [], //助教下拉数据
      banzhurenList: [], //班主任下拉数据
      dialogShow: false,
      formData: {
        subject_id: "",
        class_name: "",
        teacher_info: [],
        zhujiao_info: [],
        manager_info: [],
        start_time: "",
        end_time: "",
        sort: "",
        state: 1,
      },
      formRules: {
        subject_id: [{ required: true, message: "请选择", trigger: "change" }],
        class_name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改班级" : "新增班级";
    },
  },
  created() {
    this.getSubjectList();
    this.getTeachers();
  },
  methods: {
    // 归属学科下拉数据
    async getSubjectList() {
      let res = await getSubjectInfoAPi({
        page: 1,
        limit: 1000,
      });
      this.SubjectList = res;
    },
    // 关闭弹框
    closeDialog() {
      this.formData = {
        subject_id: "",
        class_name: "",
        teacher_info: [],
        zhujiao_info: [],
        manager_info: [],
        start_time: "",
        end_time: "",
        sort: "",
        state: 1,
      };
      this.$refs.formRef.resetFields();
    },
    // 定义Time方法 处理时间数据
    Time() {
      if (!this.dateRange.length) return "";
      return this.dateRange.map((item) => new Date(item));
    },
    async btnOk() {
      // 校验
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      this.formData.start_time = this.Time[0];
      this.formData.end_time = this.Time[1];
      // 请求
      if (this.formData.id) {
        await editClassInfoApi(this.formData);
        this.$message.success("修改成功");
      } else {
        // 新增
        await addClassInfoApi(this.formData);
        this.$message.success("添加成功");
      }
      this.$emit("updateList");
      this.dialogShow = false;
    },

    async getTeachers() {
      let res = await getTeacherListApi({ role_name: "讲师" });
      // console.log(res);
      this.jiangshiList = res;
      let res2 = await getTeacherListApi({ role_name: "班主任" });
      // console.log(res2);
      this.banzhurenList = res2;
      let res3 = await getTeacherListApi({ role_name: "助教" });
      console.log(res3);
      this.zhujiaoList = res3;
    },
  },
};
</script>

<style lang="scss" scoped></style>
